import { Icon } from "antd";
// import Grid from "antd-mobile/lib/grid";
import { List, Modal } from 'antd-mobile';
import { addon } from "pao-aop";
import { Authentication, reactControl, ReactView, ReactViewControl, ReactViewState } from "pao-aop-client";
import React from "react";
import { LOCAL_FUNCTION_LIST } from "src/business/mainForm/backstageManageMainForm";
import { request } from "src/business/util_tool";
import { AppServiceUtility } from "src/projects/app/appService";
import { IntelligentElderlyCareAppStorage } from "src/projects/app/appStorage";
import { getAppPermissonObject, forceCheckIsLogin, ROUTE_PATH } from "src/projects/app/util-tool";
// import { AppServiceUtility } from "src/projects/app/appService";
// import { request } from "src/business/util_tool";
const Item = List.Item;
const alert = Modal.alert;
/**
 * 组件：名称状态
 */
export interface MineViewState extends ReactViewState {
    icon_data?: any[];
    /*用户id */
    id?: any;
    /*账号名 */
    name?: any;
    showState?: boolean;
    account?: any;
    touxiang?: any;
}

/**
 * 组件：名称
 * 描述
 */
export class MineView extends ReactView<MineViewControl, MineViewState> {
    constructor(props: any) {
        super(props);
        this.state = {
            id: '',
            name: '',
            showState: false,
        };
    }
    componentDidMount() {
        // 判断是否登录
        AppServiceUtility.personnel_service.get_user_session!()!
            .then((data: any) => {
                this.setState({ showState: data });
            });
        // // 获取当前用户，拿到用户id和头像、账户名
        request(this, AppServiceUtility.person_org_manage_service.get_current_user_info!())
            .then((data: any) => {
                if (data && data.length > 0) {
                    this.setState({
                        id: data[0].id,
                        name: data[0].name,
                        account: data[0].login_info[0].login_check.account_name,
                        // 防止报错
                        touxiang: data[0].personnel_info && data[0].personnel_info.picture_list && data[0].personnel_info.picture_list[0] ? data[0].personnel_info.picture_list[0] : "",
                    });
                }
            });
    }
    // 退出登录
    exit = () => {
        alert('退出登录', '你确认退出吗???', [
            { text: '取消', onPress: () => history.back() },
            { text: '确定', onPress: () => this.handleExit() },
        ]);
    }
    // 确定回调
    handleExit = () => {
        Authentication.logout()
            .then(data => {
                // 清除cookies
                IntelligentElderlyCareAppStorage.clearCookies();
                localStorage.clear();
                this.props.history!.push(ROUTE_PATH.login);
            })
            .catch((error) => { });
    }
    render() {
        const { showState, touxiang } = this.state;
        const AppPermission = JSON.parse(localStorage.getItem(LOCAL_FUNCTION_LIST)!);
        return (
            // <div style={{ margin: '0px 15px 150px 15px', height: document.body.clientHeight }}>
            // 修改滚动不到最底部的样式，原样式在上面
            <div style={{ margin: '0px 15px 20px' }}>
                <div style={{ backgroundColor: '#ffffff', borderRadius: '10px', height: '110px', padding: '23px 10px 10px 30px' }}>
                    {showState === true ?
                        <div style={{ height: '75px', overflow: 'hidden' }} onClick={() => this.props.history!.push(ROUTE_PATH.myDetail + '/' + this.state.id)}>
                            <div style={{ float: 'left' }}>
                                <img
                                    src={touxiang ? touxiang : 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1564975937&di=cac390b27275e6a039d3a1eeb2b338bf&src=http://img.mp.itc.cn/upload/20170816/ede70cf3a497447fa423391b154fe7b0_th.jpg'}
                                    alt=""
                                    style={{ width: '65px', height: '65px', borderRadius: '10%' }}
                                />
                            </div>
                            {/* <span style={{ marginLeft: '30px', lineHeight: '75px', fontSize: '20px', fontWeight: 'bold' }}>{this.state.name ? this.state.name : '张三'}</span> */}
                            <div style={{ float: 'left', marginLeft: '40px' }}>
                                <p style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '11px' }}>{this.state.name ? this.state.name : '未登录'}</p>
                                <p style={{ fontSize: '15px', fontWeight: 'bold' }}>{"账号：" + (this.state.account ? this.state.account : '未登录')}</p>
                            </div>
                        </div>
                        :
                        <div style={{ height: '75px', padding: '0 20px', textAlign: 'center', fontSize: '20px' }} onClick={() => this.props.history!.push(ROUTE_PATH.login)}><span style={{ lineHeight: '75px' }}>暂未登录,请登录</span></div>
                    }
                    {/* <div style={{ height: '80px', marginTop: '5px' }}>
                        <Grid data={this.state.icon_data} columnNum={4} hasLine={false} onClick={(_el: any) => this.goDetails(_el)} />
                    </div> */}
                </div>
                {/* <div style={{ marginTop: '20px' }}>
                    <List className="myList">
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { this.props.history!.push(ROUTE_PATH.myAccount); }} arrow="horizontal">我的账户</Item>
                    </List>
                </div> */}
                <div style={{ marginTop: '20px' }}>
                    <List className="myList">
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { forceCheckIsLogin(this.props, { successPath: ROUTE_PATH.familyFiles }, { backPath: ROUTE_PATH.mine }); }} arrow="horizontal">家人档案</Item>
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { forceCheckIsLogin(this.props, { successPath: ROUTE_PATH.healthFiles }, { backPath: ROUTE_PATH.mine }); }} arrow="horizontal">健康档案</Item>
                    </List>
                </div>
                <div style={{ marginTop: '20px' }}>
                    <List className="myList">
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { forceCheckIsLogin(this.props, { successPath: ROUTE_PATH.familyList, params: { url: ROUTE_PATH.demandRelease, key: this.props.match!.params.key } }, { backPath: ROUTE_PATH.mine }); }} arrow="horizontal">需求发布</Item>
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { forceCheckIsLogin(this.props, { successPath: ROUTE_PATH.demandList }, { backPath: ROUTE_PATH.mine }); }} arrow="horizontal">我的需求</Item>
                        {/* <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} onClick={() => { this.props.history!.push(ROUTE_PATH.friendsList); }} arrow="horizontal">我的好友</Item> */}
                        {/* <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} onClick={() => { this.props.history!.push(ROUTE_PATH.seeBill); }} arrow="horizontal">我的账单</Item> */}
                        {/* <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} onClick={() => { this.props.history!.push(ROUTE_PATH.myActivityList); }} arrow="horizontal">已报名活动</Item> */}
                        {/* <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} onClick={() => { this.props.history!.push(ROUTE_PATH.myActivityRoomList); }} arrow="horizontal">已预约活动室</Item>
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} onClick={() => { this.props.history!.push(ROUTE_PATH.reservationlist); }} arrow="horizontal">已预约养老院</Item> */}
                        {/* <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} onClick={() => { this.props.history!.push(ROUTE_PATH.deviceList); }} arrow="horizontal">我的设备</Item> */}
                        {
                            AppPermission && getAppPermissonObject(AppPermission, '服务人员订单', '查询') ?
                                <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { forceCheckIsLogin(this.props, { successPath: ROUTE_PATH.servicerTaskList }, { backPath: ROUTE_PATH.mine }); }} arrow="horizontal">我的订单(服务人员)</Item>
                                :
                                <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { forceCheckIsLogin(this.props, { successPath: ROUTE_PATH.myOrder }, { backPath: ROUTE_PATH.mine }); }} arrow="horizontal">我的订单</Item>
                        }
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { forceCheckIsLogin(this.props, { successPath: ROUTE_PATH.servicePayment }, { backPath: ROUTE_PATH.mine }); }} arrow="horizontal">服务支付</Item>
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { forceCheckIsLogin(this.props, { successPath: ROUTE_PATH.appointmentApplication }, { backPath: ROUTE_PATH.mine }); }} arrow="horizontal">预约申请</Item>
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { forceCheckIsLogin(this.props, { successPath: ROUTE_PATH.serviceConcern }, { backPath: ROUTE_PATH.mine }); }} arrow="horizontal">服务关注</Item>
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { forceCheckIsLogin(this.props, { successPath: ROUTE_PATH.serviceCollection }, { backPath: ROUTE_PATH.mine }); }} arrow="horizontal">服务收藏</Item>
                    </List>
                </div>
                {
                    AppPermission && (getAppPermissonObject(AppPermission, '发布', '查询') || getAppPermissonObject(AppPermission, '签到', '查询') || getAppPermissonObject(AppPermission, '受理', '查询')) ?
                        <div style={{ marginTop: '10px' }}>
                            <List className="myList2">
                                {
                                    getAppPermissonObject(AppPermission, '发布', '查询') ?
                                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { this.props.history!.push(ROUTE_PATH.myRelease); }} arrow="horizontal">发布</Item>
                                        :
                                        null
                                }
                                {
                                    getAppPermissonObject(AppPermission, '签到', '查询') ?
                                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { this.props.history!.push(ROUTE_PATH.mySignIn); }} arrow="horizontal">签到</Item>
                                        :
                                        null
                                }
                                {
                                    getAppPermissonObject(AppPermission, '受理', '查询') ?
                                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { this.props.history!.push(ROUTE_PATH.myAcceptance); }} arrow="horizontal">受理</Item>
                                        :
                                        null
                                }

                            </List>
                        </div>
                        :
                        null
                }
                {
                    AppPermission && (getAppPermissonObject(AppPermission, '发帖', '查询') || getAppPermissonObject(AppPermission, '评论', '查询') || getAppPermissonObject(AppPermission, '点赞', '查询')) ?
                        <div style={{ marginTop: '10px' }}>
                            <List className="myList2">
                                {
                                    getAppPermissonObject(AppPermission, '发帖', '查询') ?
                                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { this.props.history!.push(ROUTE_PATH.publish); }} arrow="horizontal">发帖</Item>
                                        :
                                        null
                                }
                                {
                                    getAppPermissonObject(AppPermission, '评论', '查询') ?
                                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { this.props.history!.push(ROUTE_PATH.commmentList); }} arrow="horizontal">评论</Item>
                                        :
                                        null
                                }
                                {
                                    getAppPermissonObject(AppPermission, '点赞', '查询') ?
                                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { this.props.history!.push(ROUTE_PATH.giveThumbsUp); }} arrow="horizontal">点赞</Item>
                                        :
                                        null
                                }
                            </List>
                        </div>
                        :
                        null
                }
                <div style={{ marginTop: '10px' }}>
                    <List className="myList2">
                        {/* <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} onClick={() => { this.props.history!.push(ROUTE_PATH.editInfo + '/' + this.state.id); }} arrow="horizontal">修改个人资料</Item> */}
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { this.props.history!.push(ROUTE_PATH.setUp); }} arrow="horizontal">设置</Item>
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { forceCheckIsLogin(this.props, { successPath: ROUTE_PATH.feedback }, { backPath: ROUTE_PATH.mine }); }} arrow="horizontal">反馈</Item>
                        {/* <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold' }} thumb={<Icon type="wallet" />} onClick={() => { this.props.history!.push(ROUTE_PATH.aboutUs); }} arrow="horizontal">关于我们</Item> */}
                    </List>
                </div>
                {showState && <div style={{ marginTop: '10px' }}>
                    <List className="myList3">
                        <Item style={{ lineHeight: '50px', paddingLeft: '15px', fontWeight: 'bold', color: 'red' }} thumb={<Icon type="wallet" />} arrow="horizontal" onClick={this.exit}>退出登录</Item>
                    </List>
                </div>}
            </div>
        );
    }
}

/**
 * 控件：名称控制器
 * 描述
 */
@addon('MineView', '名称', '描述')
@reactControl(MineView, true)
export class MineViewControl extends ReactViewControl {
    constructor() {
        super();
    }
}